The Crucible
Ribbed vault, bolted seams, one hot line running through the middle of it. The loudest surface in the system.
01ember
Generic Page
Prose
Rem is a token-driven multi-page template built on one tension: a cold steel surface and a single accent that glows from the inside. Everything below is drawn from the same handful of CSS variables.
Where this comes from
Rem is built out of a real place in a real text: the frozen city in The First Mechan, a short story from Luko Karavan's Antihistor cycle, in English on Substack.
Snow settles on the aqueducts and the steam does not stop. Every plate on this page is the same plate: a sheet of metal with a lit top edge, a shadowed bottom edge, and four rivets holding it down. Change the six core tokens and the whole city changes colour without a single component being touched.
The reading column is justified and hyphenated, the way a printed page is set, and every paragraph after the first indents its opening line. Narrow or framed blocks opt out of that automatically, because justification needs a wide measure before it stops looking like a ransom note. Headings are cut, not printed: the display face is an inscriptional capital, and the two-sided shadow reads as relief on steel in the dark theme and as an incision into stone in the light one.
Nothing here needs a build step, a framework, or a package manager. Four font families, five stylesheets, one script.
Headings
Heading Level Two
A section heading carries a brass rule below it, seventy-two pixels wide, fading to nothing.
Heading level three
Level three wears a brass rivet where a lesser system would put a bullet.
Heading level four
From here down the headings stop shouting and simply do their job.
Heading level five
Still display type, still engraved, no longer uppercase.
Heading level six
The smallest step doubles as a machine label: condensed, tracked out, muted.
Multi-column text
Columns are divided by a thin brass rule rather than empty space, so a newspaper-style block still reads as machinery rather than as a spreadsheet.
Three columns collapse to two below nine hundred pixels and to one below six hundred and forty, and the rule disappears with them.
Nothing about the column count is hard-coded into a component: it is a utility class you drop onto any container that holds running text.
The measure stays readable because the gutter is a spacing token, not a magic number typed into the rule that needed it.
Text wrap
An image floats into the column and the justified text closes around it. Below six hundred and forty pixels the float is dropped entirely and the figure becomes a full-width block, because a three-word line beside a picture is not typesetting, it is punishment.
Every picture sits inside a drawn panel. The panel is the fallback - if the file is missing, the scene shows through - and the hoarfrost vignette lies over both, so a photograph dropped into the same slot still reads as part of one deliberate system rather than as a pasted-in image.
The caption underneath is a condensed machine label at seventy percent opacity: present when you look for it, silent when you do not.
Cards
The Forge
Heat coming out of the dark. The only place in the palette where the accent is allowed to fill a whole surface.
02rust
The Ring
Twelve ticks on a circle, drawn with one repeating conic gradient. It scales from an eight-pixel bullet to a full seal.
03brass
Pressure
12Sigils
5Stylesheets
0Build steps
2Themes
Inline text
Running copy can carry strong emphasis, italics, a link that heats on hover, some marked text in brass, and a struck-out clause. Technical writing gets inline code in a cold blue, keys such as Ctrl + K, an abbreviation like AA, plus H2O and 12th.
Miracles aren’t magic — they’re hard work, money, and a little genius in the background.
Lists
Unordered — sigil rings
- Markers are rings, not squares
- Nested levels go hollow
- Second level
- Second level again
- The ring is the mark of the whole system
Ordered — brass numerals
- Numerals are set in mono
- Coloured brass, weight six hundred
- The machine counts in figures
Quotes
Every colour, size and shadow on this page comes from a variable. There is no hex code anywhere below the tokens file, and that is the whole trick.
Design system manifest
Pull quote
One hot surface per screen. Everything else is cold metal.
Table
| Token | Role | Value |
|---|---|---|
| --bg0 | Page ground | #0d1218 |
| --fg0 | Body text | #dfe7ee |
| --acc-ember | Primary | #e08b3a |
| --acc-brass | Decorative | #c9a227 |
Minimal variant
| Step | px |
|---|---|
| --sp-4 | 16 |
| --sp-8 | 32 |
| --sp-24 | 96 |
Buttons
Primary & plate
Semantic variants
With an icon
Badges & tags
Ember
Info
Tip
Warning
Brass
Tags
Palette
ember
frost
verdigris
rust
brass
Callouts
Note
The body of a callout stays uncoloured. Only the spine, the icon and the title carry the accent, so a page of callouts never turns into a paint chart.
Tip
Variants swap a single variable. Nothing else in the rule changes.
Warning
Only the spacing steps 1, 2, 3, 4, 6, 8, 12, 16 and 24 exist. An undefined step is an invalid value and silently kills the whole rule.
Accordion
Does it need JavaScript?
No. The accordion is a native details element; the ring marker fills through the open attribute alone.
How does the light theme work?
A light page links tokens-light.css instead of tokens.css. Nothing else in the markup or the other stylesheets changes.
What stays dark in light mode?
The header and the crucible band. Machine chrome is cast iron, and the Crucible is underground either way.
Definition list
- Plate
- The riveted surface every component is built on.
- Annulus
- The ring of twelve; the mark of the system, from bullet to seal.
- Ember
- The one hot accent. Links, focus, primary action.
Form controls
Code
:root {
--bg0: #0d1218;
--acc-ember: #e08b3a;
--acc-brass: #c9a227;
}
.btn--primary {
background: var(--acc-ember);
box-shadow: var(--glow);
}Gauges
Boiler pressure72%
Coolant reserve0.34
Seal integrity0.88
Gallery
Variant A — stage with a thumbnail rail
Turris Borealis — the tower above the snow line
Variant B — thumbs as a side rail
Turris Borealis — the tower above the snow line
Variant C — filmstrip with nav arrows
Turris Borealis — the tower above the snow line
End of the sink
Everything above is drawn from css/tokens.css. Swap that one file for css/tokens-light.css and the same markup becomes the light theme: cold marble instead of midnight steel, with the header and the crucible band still cast in iron.